<!DOCTYPE html>
<html>
	<head>
		<title>我的</title>
		
		
<!-------------------- 公共头部 --------------------------->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		
		<link rel="stylesheet" type="text/css" href="../static/css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/mui.previewimage.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/css.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/swiper.min.css"/>
		<script type="text/javascript" src="../static/js/swiper.min.js"></script>
		<script type="text/javascript" src="../static/js/mui.min.js"></script>
		<script type="text/javascript" src="../static/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="../static/js/localImg.js"></script>
		<script type="text/javascript" src="../static/js/mobileImg.js"></script>
		<script type="text/javascript" src="../static/js/mui.zoom.js"></script>
		<script type="text/javascript" src="../static/js/mui.previewimage.js"></script>
<!-- 		<script type="text/javascript" src="//res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
		
		<style type="text/css">
			.divHeight {
			    width: 100%;
			    height: 5px;
			    background: #f5f5f5;
			    position: relative;
			    overflow: hidden;
			}
			
			.mui-show-loading {  
			    position: fixed;  
			    padding: 5px;  
			    width: 120px;  
			    min-height: 120px;  
			    top: 45%;  
			    left: 50%;  
			    margin-left: -60px;  
			    background: rgba(0, 0, 0, 0.6);  
			    text-align: center;  
			    border-radius: 5px;  
			    color: #FFFFFF;  
			    visibility: hidden;  
			    margin: 0;  
			    z-index: 2000;  
			
			    -webkit-transition-duration: .2s;  
			    transition-duration: .2s;  
			    opacity: 0;  
			    -webkit-transform: scale(0.9) translate(-50%, -50%);  
			    transform: scale(0.9) translate(-50%, -50%);  
			    -webkit-transform-origin: 0 0;  
			    transform-origin: 0 0;  
			}  
			.mui-show-loading.loading-visible {  
			    opacity: 1;  
			    visibility: visible;  
			    -webkit-transform: scale(1) translate(-50%, -50%);  
			    transform: scale(1) translate(-50%, -50%);  
			}  
			.mui-show-loading .mui-spinner{  
			    margin-top: 24px;  
			    width: 36px;  
			    height: 36px;  
			}  
			.mui-show-loading .text {  
			    line-height: 1.6;  
			    font-family: -apple-system-font,"Helvetica Neue",sans-serif;  
			    font-size: 14px;  
			    margin: 10px 0 0;  
			    color: #fff;  
			}  
			
			.mui-show-loading-mask {  
			  position: fixed;  
			  z-index: 1000;  
			  top: 0;  
			  right: 0;  
			  left: 0;  
			  bottom: 0;  
			}  
			.mui-show-loading-mask-hidden{  
			    display: none !important;  
			}
			
			.list-nothing {
			    width: 100%;
			    height: 4rem;
			    display: flex;
			    flex-direction: column;
			    align-items: center;
			    justify-content: center;
			    line-height: 1.01;
			}
			.list-nothing__icon {
			    background: url(../static/img/bg_nothing.png) no-repeat 0 0;
			    background-size: contain;
			    width: 2rem;
			    height: 2rem;
			}
			.list-nothing__text {
			    margin-top: 0.4rem;
			    font-size: 0.2rem;
			    color: #151617;
			}
		</style>
		
		<script type="text/javascript">
			//扩展mui.showLoading  
			(function($, window) {  
			    //显示加载框  
			    $.showLoading = function(message,type) {  
			        if ($.os.plus && type !== 'div') {  
			            $.plusReady(function() {  
			                plus.nativeUI.showWaiting(message);  
			            });  
			        } else {  
			            var html = '';  
			            html += '<i class="mui-spinner mui-spinner-white"></i>';  
			            html += '<p class="text">' + (message || "数据加载中") + '</p>';  
		
			            //遮罩层  
			            var mask=document.getElementsByClassName("mui-show-loading-mask");  
			            if(mask.length==0){  
			                mask = document.createElement('div');  
			                mask.classList.add("mui-show-loading-mask");  
			                document.body.appendChild(mask);  
			                mask.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});  
			            }else{  
			                mask[0].classList.remove("mui-show-loading-mask-hidden");  
			            }  
			            //加载框  
			            var toast=document.getElementsByClassName("mui-show-loading");  
			            if(toast.length==0){  
			                toast = document.createElement('div');  
			                toast.classList.add("mui-show-loading");  
			                toast.classList.add('loading-visible');  
			                document.body.appendChild(toast);  
			                toast.innerHTML = html;  
			                toast.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});  
			            }else{  
			                toast[0].innerHTML = html;  
			                toast[0].classList.add("loading-visible");  
			            }  
			        }     
			    };  
		
			    //隐藏加载框  
			      $.hideLoading = function(callback) {  
			        if ($.os.plus) {  
			            $.plusReady(function() {  
			                plus.nativeUI.closeWaiting();  
			            });  
			        }   
			        var mask=document.getElementsByClassName("mui-show-loading-mask");  
			        var toast=document.getElementsByClassName("mui-show-loading");  
			        if(mask.length>0){  
			            mask[0].classList.add("mui-show-loading-mask-hidden");  
			        }  
			        if(toast.length>0){  
			            toast[0].classList.remove("loading-visible");  
			            callback && callback();  
			        }  
			      }  
			})(mui, window);
		</script>
<!-------------------- 公共头部 --------------------------->

		<link rel="stylesheet" type="text/css" href="../static/css/home.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/translateelement.css"/>
		<link type="text/css" href="../static/css/dialog.css" rel="stylesheet">
		<script type="text/javascript" src="../static/js/mDialogMin.js"></script>
		<style type="text/css">
		.guize_html{position:fixed;top:25%;left:50%;margin-top:-80px;margin-left:-159px;width:318px;height:auto;border-radius:4px;background-color:#fff;color:#000;text-align:center;font-size:12px}
		.guize_html p{padding:0 10px;text-align:left;text-indent:2em}
		.guize_html_nei{width:318px;min-height:350px;overflow-y:auto;max-height:500px;height:350px;display:block;overflow-y:scroll}
		.btn{display:block;margin:10px auto;width:240px;height:40px;border-radius:4px;background-color:#ff6434;color:#fff;text-align:center;line-height:40px;cursor:pointer}
		.overfloat{position:fixed;top:0;left:0;z-index:9;display:none;width:100%;height:100%;background-color:rgba(1,1,1,.5)}
		</style>
		
	</head>
	<body>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="#">
						<label>
						<input type="file" name="avatar" id="avatar" hidden="hidden" accept="image/*" />
						<img class="mui-media-object mui-pull-left" src="../static/images/100.jpg" id="litpic">
						</label>
						<div class="mui-media-body">
							<span id=name>小宝同学</span>
							<p class="mui-ellipsis" style="font-size: .28rem;">微记号：<span id="user">100</span></p>
						</div>
<!-- 						<span class="mui-icon mui-icon-arrowright" style="float: right;font-size: .6rem;margin-top: .7rem;color: #999;"></span> -->
					</a>
				</li>
			</ul>
		</div>
		
		 <section class="">
            <section class="">
                <div class="aui-course-list">
                    <div class="divHeight"></div>
                    <a href="javascript:show_mood();" class="aui-flex b-line">
                        <div class="aui-cou-img">
                            <img src="../static/img/icon-call-004.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>此刻心情</h2>
                        </div>
                        <div class="aui-arrow" >
                            <p id="mood-p" style="color:#9ad88b" >非常好</p>
                        </div>
                    </a>
					 <a  href="javascript:mui.confirm('查看我们此刻的距离？',' ',['否','是'],function(e) {jssdk(e)});"  class="aui-flex b-line">
                        <div class="aui-cou-img">
                            <img src="../static/img/icon-call-002.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>我们距离</h2>
                        </div>
                        <div>
                        	 <p id="location-p" style="font-size: 10px;" >30 公里</p>
                        </div>
                    </a>
                    
                   <a href="javascript:mui.confirm('如在指定天数内未产生互动，系统将会强制您互动，互动后即可解除。',' ',['知道了'],function(e) {});" class="aui-flex b-line">
                        <div class="aui-cou-img">
                            <img src="../static/img/bg_nothing.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2 >强制互动</h2>
                        </div>
                        <div>
 							<p style="font-size: 10px;">沉默期 <span style="color:#dd524d">1</span> 小时，倒时<span style="color:#dd524d"> 20</span> 分</p>
                        </div>
                    </a>
                    
                   <a href="javascript:mui.confirm('TA与您互动的动态条数<br/>日志 / 消息',' ',['知道了'],function(e) {});"  class="aui-flex b-line">
                        <div class="aui-cou-img">
                            <img src="../static/img/icon-call-004.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>TA动态数</h2>
                        </div>
                         <div>
                        	 <p style="font-size: 10px;" >动态 <span style="color:#dd524d">100</span> 条，今新增<span style="color:#dd524d"> 20</span> 条</p>
                        </div>
                    </a>
                    
                     <a href="javascript:mui.confirm('TA的浏览数量。',' ',['知道了'],function(e) {});"  class="aui-flex b-line">
                        <div class="aui-cou-img">
                            <img src="../static/img/icon-call-007.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>TA浏览数</h2>
                        </div>
                         <div>
                        	 <p style="font-size: 10px;" >浏览 <span style="color:#dd524d">112</span> 次，今新增<span style="color:#dd524d"> 22</span> 次</p>
                        </div>
                    </a>
                    
                    
                   <a href="javascript:shpwAlbum();" class="aui-flex b-line">
                        <div class="aui-cou-img">
                            <img src="../static/img/icon-call-006.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>共享相册</h2>
                        </div>
                        <div class="aui-arrow">
 							<p style="font-size: 10px;">相册 <span style="color:#dd524d">22</span> 张，今新增 <span style="color:#dd524d">2</span> 张</p>
                        </div>
                    </a>
                    

                    <a href="" class="aui-flex b-line">
                        <div class="aui-cou-img">
                            <img src="../static/img/icon-call-003.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>宝宝心心</h2>
                        </div>
                        <div class="aui-arrow">
							<p>&nbsp;</p>
                        </div>
                    </a>
                    
                    
                   <a href="" class="aui-flex b-line">
                        <div class="aui-cou-img">
                            <img src="../static/img/gift.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>宝宝生日</h2>
                        </div>
                        <div class="aui-arrow">
							<p>&nbsp;</p>
                        </div>
                    </a>
                    
                    <a href="./pain.html" class="aui-flex b-line">
                        <div class="aui-cou-img">
                            <img src="../static/img/icon-call-006.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>涂鸦日记</h2>
                        </div>
                        <div class="aui-arrow">
 							<p>&nbsp;</p>
                        </div>
                    </a>
                    
                    
                     <a href="javascript:mui.confirm('确定封存所有数据？',' ',['否','是'],function(e) {seal(e)});" class="aui-flex b-line">
                        <div class="aui-cou-img">
                            <img src="../static/img/icon-call-001.png" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h2>一键封存</h2>
                        </div>
                        <div class="aui-arrow">
 							<p>&nbsp;</p>
                        </div>
                    </a>
                    
                    <div class="divHeight"></div>
                     <a href="javascript:mui.confirm('是否退出',' ',['否','是'],function(e) {logout(e)});" class="aui-flex b-line" style="padding: 25px;">
                        <div class="aui-flex-box" style="text-align: center;">
                            <h2 style="color: #dd524d;">退出帐号</h2>
                        </div>
                    </a>
                    
                </div>
                <br/><br/><br/><br/><br/>
                 
            </section>

		<div class="overfloat" id="gui_kai" style="display: none;">
		
		</div>
	
		<div id="app-cover" style="display: none;">
			<h3 style="text-align: center;margin-bottom: 10px;">
				<font style="vertical-align: inherit;"><font
					style="vertical-align: inherit;">今天心情如何吖？</font></font>
			</h3>
			<div id="app">
				<div class="mood active" id="mood-great"  data-color="#9ad88b" data-mood="非常好">
					<div class="face">
						<div class="eyes-cover">
							<div class="eye"></div>
							<div class="eye"></div>
						</div>
						<div class="mouth"></div>
					</div>
					<div class="mood-name">
						<span><font style="vertical-align: inherit;"><font
								style="vertical-align: inherit;">非常好</font></font></span>
					</div>
				</div>
				<div class="mood" id="mood-okay"  data-color="#b1babe" data-mood="一般">
					<div class="face">
						<div class="eyes-cover">
							<div class="eye"></div>
							<div class="eye"></div>
						</div>
						<div class="mouth"></div>
					</div>
					<div class="mood-name">
						<span><font style="vertical-align: inherit;"><font
								style="vertical-align: inherit;">一般</font></font></span>
					</div>
				</div>
				<div class="mood" id="mood-bad" data-color="#f57a71" data-mood="很坏">
					<div class="face">
						<div class="eyes-cover">
							<div class="eye"></div>
							<div class="eye"></div>
						</div>
						<div class="mouth"></div>
					</div>
					<div class="mood-name">
						<span><font style="vertical-align: inherit;"><font
								style="vertical-align: inherit;">很坏</font></font></span>
					</div>
				</div>

			</div>
		</div>
	
		<footer>
			<li onclick=mui.openWindow('message.html')><span>
				<img src="../static/img/tabs/info.svg" ></span><span >消息</span>
			</li>
			<li onclick=mui.openWindow('friends.html')>
				<span><img src="../static/img/tabs/friend.svg" ></span><span>TA</span>
			</li>
			<li onclick=mui.openWindow('share.html')>
				<span><img src="../static/img/tabs/find.svg" ></span><span >日记</span>
			</li>
			<li onclick=mui.openWindow('home.html')>
				<span><img src="../static/img/tabs/min.1.svg" ></span><span style="color:#01CAFD">我的</span>
			</li>
		</footer>
	</body>
	
<script type="text/javascript">

function closeDialog(h){
	var j;
	var k=document.querySelectorAll('.c_alert_dialog');
	[].forEach.call(k,function(l) {
	(l.dataset.index==h||l===h.parentNode)&&(l.classList.remove('dialog_open'),l.classList.add('dialog_close'),j&&j.call(l.querySelector('.c_alert_wrap'),h),l.querySelector('.c_alert_wrap').addEventListener('animationend',function() {
	l.remove()
	}
	))})
}
</script>
	
<script type="text/javascript">
$(function(){
	
});

function shpwAlbum(){
    Dialog.init('<input type="number" placeholder="请您输入相册密码"  style="margin:0px 0;margin-top: 10px;width:100%;padding:11px 8px;font-size:12px; border:0.01rem solid #ddd;border-radius: 0.1rem;"/>',{
        title : '请您输入相册密码！',
        button : {
            	打开 : function(){
	                if(this.querySelector('input').value.length >= 1){
	                	passAlbum(this,this.querySelector('input').value);
		            }else{
		            	mui.toast('请您输入相册密码',{ duration:'10', type:'div' });
		            };
	            },
	        	取消: function(){
	        		closeDialog(this);
	            }
        }
    });
}

function passAlbum(h,pass){
	window.location.href = "./album.html";	
}
</script>


<script type="text/javascript">
$(function() {
	$('#gui_kai').click(function(){
		close_mood();
	});
	
	$('.mood').click(function(){
		 $(".mood").removeClass('active');
		 $(this).addClass('active');
		 
		 var mood=$(this).data("mood");
		 var color=$(this).data("color");
		 
		 $("#mood-p").html(mood);
		 $("#mood-p").css("color", color);
	});
	
});


function seal(e){
	if(e.index==1){
		mui.toast('封存成功',{ duration:'10', type:'div' });
	}
}


function closesys(e){
	if(e.index==1){
		mui.toast('暂不支持此操作',{ duration:'10', type:'div' });
	}
}


function logout(e){
	if(e.index==1){
		window.location.href ="./login.html";
	}
}


function show_mood(){
	$("#gui_kai").show();
	$("#app-cover").show();
}

function close_mood(){
	$("#gui_kai").hide();
	$("#app-cover").hide();
}
</script>
	
</html>